<template>
    <div class="home-page">
        <el-container>
            <el-aside :width="!isshow ? '200px' : '64px'">
                <el-row>
                    <el-col>
                        <div class="top-img" v-if="!isshow">
                            <img src="http://pinda.itheima.net/static/img/log.986a60ec.png" />
                        </div>
                        <div class="top-img2" v-else>
                            <img src="	http://pinda.itheima.net/static/img/logo-mini.bf6339a4.png" />
                        </div>
                        <el-menu route unique-opened :collapse-transition="false" :collapse="isshow"
                            active-text-color="#ff7a63" background-color="#262335" class="el-menu-vertical-demo"
                            text-color="#9a9a9a" @open="handleOpen" @close="handleClose" @select="selectMenu">
                            <el-sub-menu v-for="(item, index) in MenuList" :key="index" :index="item['url']">
                                <template #title>
                                    <el-icon v-if="index == 0">
                                        <Promotion />
                                    </el-icon>
                                    <el-icon v-if="index == 1">
                                        <Setting />
                                    </el-icon>
                                    <el-icon v-if="index == 2">
                                        <Platform />
                                    </el-icon>
                                    <span class="textOne">{{ item['name'] }}</span>
                                </template>
                                <el-sub-menu :index="item1['url']" v-for="(item1, index1) in item['children']"
                                    :key="index1">
                                    <template #title>
                                        <span class="textTwo">{{ item1['name'] }}</span>
                                    </template>
                                    <el-menu-item class="textThree" :index="item2['url']" :key="index2"
                                        v-for="(item2, index2) in item1['children']">{{ item2['name'] }}</el-menu-item>
                                </el-sub-menu>
                            </el-sub-menu>
                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <el-main>
                <div class="top-crumbs">
                    <div class="top-left">
                        <svg v-if="!isshow" @click="putup" t="1664951156241" class="icon" viewBox="0 0 1024 1024"
                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16059" width="32" height="32">
                            <path
                                d="M908.70574649 831.22148693H134.16925867v-52.07344924h774.54813867v52.07344924zM531.80092872 442.96292125H130.86041885V390.889472h400.94050987zM531.80092872 634.17075485H130.86041885v-52.05597298h400.94050987zM901.4996992 245.91801458H126.9690368v-52.06762383h774.54231325v52.06762383zM669.95081672 518.02348658l225.4205383-150.2609408v300.53353244z"
                                p-id="16060"></path>
                        </svg>
                        <svg v-else @click="putup" t="1664951846210" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="16410" width="32" height="32">
                            <path
                                d="M32 669.28v-347.2L275.52 496 32 669.28z m340-330.4h585.44A34.56 34.56 0 0 1 992 373.44a34.72 34.72 0 0 1-34.56 34.72H372a34.72 34.72 0 0 1-34.56-34.72 34.56 34.56 0 0 1 34.56-34.56z m0 244.32h585.44A34.72 34.72 0 0 1 992 617.92a34.72 34.72 0 0 1-34.56 34.56H372a34.72 34.72 0 0 1-34.56-34.56 34.72 34.72 0 0 1 34.56-34.72zM66.56 818.88h890.88A34.56 34.56 0 0 1 992 853.44a34.56 34.56 0 0 1-34.56 34.56H66.56A34.56 34.56 0 0 1 32 853.44a34.56 34.56 0 0 1 34.56-34.56z m0-715.68h890.88A34.72 34.72 0 0 1 992 137.92a34.56 34.56 0 0 1-34.56 34.56H66.56A34.56 34.56 0 0 1 32 137.92a34.72 34.72 0 0 1 34.56-34.72z"
                                fill="#2c2c2c" p-id="16411"></path>
                        </svg>
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item :to="{ path: '/home/' }">系统首页</el-breadcrumb-item>
                            <el-breadcrumb-item><a href="/">promotion</a></el-breadcrumb-item>
                            <el-breadcrumb-item>promotion list</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <div class="top-right">
                        <img src="../../assets/vue.svg" alt="" />
                        <span>平台管理员</span>
                    </div>
                </div>
                <router-view></router-view>
            </el-main>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import "./index.scss";
import axios from "axios";
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
    Promotion,
    Platform,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
// 路由
let router = useRouter();
// 菜单栏的收缩
let isshow = ref(false);
// 菜单列表
let MenuList = ref([]);

const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath, "open");
};
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath, "close");
};
const putup = () => {
    isshow.value = !isshow.value;
};
const selectMenu = (a, b, c) => {
    console.log(a, b, c, "select");
    let urlIndex = b.index;
    router.push({ path: "/home" + a });
};
const getMenu = async () => {
    let { data } = await axios.get("/");
    console.log(data);
    MenuList.value = data.data;
};
onMounted(() => {
    getMenu();
});
</script>

<style scoped>

</style>